<template>
    <div class="languageAuto">
        <img src="@/assets/images/language/language.png" @click="showRight = !showRight" alt="">
        <van-popup v-model:show="showRight" position="right" :style="{ width: '70%', height: '100%' }">
            <div class="pop-inner">
                <div class="head">
                    <img src="@/assets/images/language/language.png" alt="">
                    Select a Country or Region
                </div>
                <div class="body">
                    <ul>
                        <li @click="languageAuto('english')">
                            <a>Australia - English</a>
                        </li>
                        <li @click="languageAuto('japanese')">
                            <a>Japan - 日本語</a>
                        </li>
                    </ul>
                </div>
            </div>


        </van-popup>
    </div>

</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const translate = instance.appContext.config.globalProperties.$translate;
let showRight = ref(false)
let language = ref("english");

function languageAuto(val) {
    // language.value === "japanese" ? (language.value = "english") : (language.value = "japanese");
    // localStorage.setItem("language", JSON.stringify({ language: language.value }));
    console.log(translate,'---translate');
    
    language.value = val;
    if (language.value === "japanese") {
        translate.changeLanguage("japanese");
    } else {
        // translate.changeLanguage("english");
        translate.reset()
    }
    // translate.changeLanguage("japanese");
    translate.execute(); // 执行翻译
    showRight.value = false;
}

</script>

<style scoped>
.pop-inner img {
    filter: invert(1);
    margin-right: 6px;
}

.pop-inner .head {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: solid 1px #888;
    padding: 10px 10px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 700;
    color: black;
    /* border: solid 1px red; */
}

.pop-inner .body {
    /* border: solid 1px red; */
    /* padding: 4px; */
}

.pop-inner .body ul {}

.pop-inner .body ul li {
    /* border: solid 1px red; */
    line-height: 30px;
    font-size: 14px;
    color: #333;
    padding: 10px 20px;
    border-bottom: dashed 1px #ccc;
}

.languageAuto {
    box-sizing: border-box;
    --iconsize: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: solid 1px red; */
}

.languageAuto img {
    width: var(--iconsize);
    height: var(--iconsize);
}
</style>